<template>
  <a-drawer 
    title="库位详情"
    wrapClassName="weiben-private-drawer"
    :width="400"
    :closable="false"
    :maskClosable="true"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <a-spin :spinning="loading">
      <div class="wms-warehouse-location-view-detail-div">
        <div class="btns-row">
          <a-button type="primary" :disabled="locationObj.islock!==0" @click.stop="onUpdateLock">锁定</a-button>
          <a-button type="primary" :disabled="locationObj.islock===0" @click.stop="onUpdateLock">解锁</a-button>
          <a-button type="primary" :disabled="!(locationObj.islock!==1)" @click.stop="onUpdateEmpty">置空</a-button>
        </div>
        <div class="location-detail-box">
          <div class="base-info info-box">
            <p>库位编号：{{locationObj.placeCode}}</p>
            <p>托盘编号：{{containercode}}</p>
          </div>
          <!-- 物料列表 start -->
          <div class="location-materials">
            <a-card v-for="(item,index) in materialList" :key="'material-item-'+index">
              <div class="info-box">
                <p>物料编号：{{item.materialNo}}</p>
                <p>批次号：{{item.materialBatch}}</p>
                <p>数量：{{item.stockNumber}}</p>
              </div>
            </a-card>
          </div>
          <!-- 物料列表 end -->
        </div>
      </div>
    </a-spin>
  </a-drawer>
</template>

<script>
import { GetLocationDetail,UpdateLock,UpdateEmpty } from '@/api/modular/main/FoamingLocationViewManage'
export default {
  name:'wmsWarehouseLocationViewDetailDrawer',
  emits:['update:visible','callback'],
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    row:{
      type:Object,
      default:function(){
        return {}
      }
    }
  },
  data(){
    return {
      loading:false,
      locationObj:{
        placestatus:null,
        islock:null
      },
      containercode:'',
      materialList:[],
      actionFlag:false
    }
  },
  methods:{
    onClose(){
      this.close()
    },
    close(){
      this.$emit('update:visible',false)
    },
    afterVisibleChange(visible){
      if (visible) {
        this.initShow()
      } else {
        this.afterClsoe()
      }
    },
    initShow(){
      this.loading = true;
      this.getLocationDetail(()=>{
        this.loading = false;
      })
    },
    getLocationDetail(callback){
      let params = {ID:this.row.id}
      GetLocationDetail(params).then((d)=>{
        this.locationObj = d.data.palceDetails || {}
        this.containercode = d.data.containercode || ''
        this.materialList = d.data.wmsMaterialStocks || []
        callback && callback(true)
      }).catch(()=>{
        callback && callback(false)
      })
    },
    afterClsoe(){
      this.locationObj = {
        placestatus:null,
        islock:null
      }
      this.containercode = ''
      this.materialList = []
      if (this.actionFlag) {
        this.$emit('callback')
      }
      this.actionFlag = false
    },
    onUpdateLock(){
      this.loading = true;
      let params = {ID:this.row.id}
      UpdateLock(params).then(()=>{
        this.actionFlag = true;
        this.getLocationDetail(()=>{
          this.loading = false;
          this.$message.success('操作成功！');
        })
      }).catch(()=>{
        this.loading = false;
      })
    },
    onUpdateEmpty(){
      this.loading = true;
      let params = {Id:this.row.id}
      UpdateEmpty(params).then(()=>{
        this.actionFlag = true;
        this.getLocationDetail(()=>{
          this.loading = false;
          this.$message.success('操作成功！');
        })
      }).catch(()=>{
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wms-warehouse-location-view-detail-div{
  height:100%;
  display: flex;
  flex-direction: column;
  &>.btns-row{
    flex-shrink: 0;
    padding:12px 16px;
    .ant-btn + .ant-btn {
      margin-left: 10px;
    }
  }
  .location-detail-box{
    flex-grow: 1;
    overflow: auto;
  }
  .info-box{
    line-height: 1.5;
    p{
      margin-bottom: 0;
    }
  }
  .base-info,.location-materials{
    padding:0 16px;
    margin-bottom: 16px;
  }
}
</style>